<template>
    <textarea ref="container"></textarea>
</template>

<script>
    export default {
        props: ['value'],
        data() {
            return {
                cached: this.value,
            }
        },
        mounted() {
            tinymce.init({
                target: this.$refs.container,
                menubar: false,
                plugins: 'preview fullpage paste searchreplace autolink code fullscreen image link media codesample table hr toc lists wordcount textpattern quickbars emoticons',
                toolbar: 'formatselect | image codesample table | forecolor backcolor fontsizeselect removeformat | blackquote numlist bullist aligncenter | hr emoticons toc media code fullscreen',
                quickbars_selection_toolbar: 'bold italic underline strikethrough quicklink blockquote',
                quickbars_insert_toolbar: false,
                relative_urls: false,
                codesample_languages: [
                    {text:"bash",value:"bash"},
                    {text:"Java",value:"java"},
                    {text:"Python",value:"python"},
                    {text:"Go",value:"Go"},
                    {text:'HTML/XML',value:'markup'},
                    {text:"XML",value:"xml"},
                    {text:"HTML",value:"html"},
                    {text:"CSS",value:"css"},
                    {text:"Javascript",value:"javascript"},
                    {text:"C",value:"c"},
                    {text:"C++",value:"cpp"},
                    {text:"ruby",value:"ruby"},
                    {text:"JSON",value:"json"},
                    {text:"kotlin",value:"kotlin"},
                    {text:"lua",value:"lua"},
                    {text:"makefile",value:"makefile"},
                    {text:"markdown",value:"markdown"},
                    {text:"nginx",value:"nginx"},
                    {text:"PHP",value:"php"},
                    {text:"rust",value:"rust"},
                    {text:"SQL",value:"sql"},
                    {text:"TypeScript",value:"typescript"},
                    {text:"YAML",value:"yaml"}
                ],
                textpattern_patterns: [
                    {start: '#', format: 'h1'},
                    {start: '##', format: 'h2'},
                    {start: '###', format: 'h3'},
                    {start: '####', format: 'h4'},
                    {start: '#####', format: 'h5'},
                    {start: '######', format: 'h6'},
                    {start: '> ', format: 'blackquote'},
                    {start: '- ', cmd: 'InsertUnorderedList'},
                    {start: '```java', replacement: '<pre class="language-java"><code></code></pre>'},
                    {start: '```html', replacement: '<pre class="language-html">Here<code></code></pre>'},
                    {start: '```json', replacement: '<pre class="language-json">Here<code></code></pre>'},
                    {start: '```js', replacement: '<pre class="language-javascript"><code></code></pre>'},
                    {start: '```css', replacement: '<pre class="language-css"><code></code></pre>'},
                    {start: '```python', replacement: '<pre class="language-python"><code></code></pre>'},
                    {start: '```py', replacement: '<pre class="language-python"><code></code></pre>'},
                    {start: '```sh', replacement: '<pre class="language-bash"><code></code></pre>'},
                    {start: '```php', replacement: '<pre class="language-php"><code></code></pre>'},
                ],
                setup: (editor) => {
                    this.editor = editor
                    editor.on('init', () => {
                        editor.setContent(this.value ? this.value: '')
                    })
                },
                init_instance_callback: (editor) => {
                    editor.on('change keyup undo redo', _.debounce(() => {
                        const html = this.cleanHtml(editor.getContent())
                        if (html === this.cached) {
                            return
                        }
                        this.cached = html
                        this.$emit('input', html)
                    }, 600));
                }
            })
        },
        watch: {
            value(newValue) {
                if (newValue === this.cached) {
                    return
                }
                this.cached = newValue
                this.editor.setContent(newValue ? newValue: '')
            }
        },
        methods: {
            cleanHtml(html) {
                return _.trim(_.replace(html, /^[\s\S]*<body>\s*|\s*<\/body>[\s\S]*$/gm, ''))
            }
        }
    }
</script>
